<script setup lang="ts">
import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";

const list = ref([]);
let y = ref(0);
let refId = ref(null);
const itemHeight = computed(() => listItem?.value?.[0]?.offsetHeight);
const listItem = ref(null);
watch(y, (newValue) => {
  if (newValue !== 0 && newValue % itemHeight.value === 0) {
    window.cancelAnimationFrame(refId.value);
    list.value.push(list.value[0]);
    list.value.shift();
    y.value = 0;
    reqAnimationFrame();
  }
});

onMounted(() => {
  list.value = new Array(20).fill(1).map((v, i) => {
    return i + 1;
  });
});

onBeforeUnmount(() => {
  refId.value = null;
});
onActivated(() => {
  reqAnimationFrame();
});
onDeactivated(() => {
  window.cancelAnimationFrame(refId.value);
  refId.value = null;
});

function enter() {
  window.cancelAnimationFrame(refId.value);
}

function leave() {
  reqAnimationFrame();
}

function reqAnimationFrame() {
  refId.value = window.requestAnimationFrame(reqAnimationFrame);
  y.value = y.value + 0.5;
  if (box.value) {
    box.value.style.transform = `translateY(${-y.value - 20}px)`;
  }
}

const box = ref(null);

let animatedNumber = ref(0); // 当前值

function animateNumber(
  start: number,
  end: number,
  duration: number,
  callback: Function
) {
  const fps = 1000 / 60; // 每秒帧数，默认60
  const totalFrames = Math.round(duration / fps); // 计算总帧数
  const increment = (end - start) / totalFrames; // 计算每帧的增量
  let current = start;
  let frame = 0;

  const animate = () => {
    if (frame < totalFrames) {
      frame++;
      current += increment;
      callback(current);
      requestAnimationFrame(animate);
    } else {
      callback(end);
    }
  };

  animate();
}
const startNum = ref(0);
const endNum = ref(0);

const addNum = () => {
  endNum.value += 50;
};
watch(
  [endNum],
  () => {
    animateNumber(startNum.value, endNum.value, 500, (currentValue: number) => {
      animatedNumber.value = Math.round(currentValue);
      startNum.value = endNum.value;
    });
  },
  // 立即监听
  { immediate: true }
);
</script>

<template>
  <!-- <BigScreen> -->
  <div class="m-16px mt-0 flex flex-col justify-center items-center text-32px">
    <span>
      {{ animatedNumber }}
    </span>
    <div
      @click="addNum"
      class="mt-10px bg-green-300 text-[#fff] text-24px p-5px rounded-6px cursor-pointer w-70px"
    >
      +50
    </div>
    <div
      @click="endNum -= 100"
      class="mt-10px bg-red-300 text-[#fff] text-24px p-5px rounded-6px cursor-pointer w-70px"
    >
      -100
    </div>
  </div>

  <div class="container">
    <div class="list" ref="box" @mouseenter="enter" @mouseleave="leave">
      <div
        ref="listItem"
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <span>我是第{{ item }}条数据</span>
      </div>
    </div>
  </div>
  <!-- </BigScreen> -->
</template>

<style scoped lang="less">
.container {
  margin: auto;
  width: 500px;
  height: 700px;
  position: relative;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #666;
  .list {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    transform: translate3d(0, 0, 0);

    .list-item {
      box-sizing: border-box;
      height: 50px;
      background-color: aqua;
      // padding: 10px 20px;
      border-bottom: 1px solid red;
    }
  }
}
</style>
